<!--
 * @Author: 吴世扬
 * @Date: 2023-03-11 15:23:26
 * @LastEditors: 吴世扬 18368095041@163.com
 * @LastEditTime: 2025-02-05 17:25:55
 * @FilePath: /vue3-admin/src/components/ui/CustomDialog/CustomDialog.vue
 * @Description: 定制弹窗
-->

<script lang="ts" setup>
import { ref, toRefs, watch, watchEffect } from 'vue';
import { ElDialog } from 'element-plus';
// import { useElementSize } from '@vueuse/core';

const props = defineProps<{
    modelValue: boolean;
    title: string;
}>();

const { modelValue } = toRefs(props);

const emits = defineEmits<{
    (event: 'update:model-value', value: boolean): void;
}>();
const handleClose = () => {
    emits('update:model-value', false);
};

const dialogRef = ref<typeof ElDialog | null>(null);
</script>

<template>
    <el-dialog
        class="custom-dialog-wrapper"
        :model-value="props.modelValue"
        width="80%"
        :show-close="false"
        :before-close="handleClose"
        ref="dialogRef"
    >
        <div class="custom-dialog-container" id="custom-dialog-container">
            <div class="header">
                <div class="flex-row ai-center">
                    <div class="bar"></div>
                    <div class="fw700 f16 c-text dark:c-dark_text">
                        {{ props.title }}
                    </div>
                </div>
                <div
                    class="back-btn"
                    @click.stop="() => emits('update:model-value', false)"
                >
                    返回
                </div>
            </div>
            <div class="body" id="custom-dialog-body">
                <!-- <div class="body-content" ref="bodyContent"><slot></slot></div> -->
                <div class="body-content">
                    <slot></slot>
                </div>
                <div class="fix-bottom">
                    <slot name="fixBottom" style="padding: 10px 0"></slot>
                </div>
            </div>
        </div>
    </el-dialog>
</template>

<style lang="scss">
.custom-dialog-wrapper {
    width: var(--el-dialog-width, 50%);
    // max-height: 90vh;
    margin: 5vh auto;
    overflow: hidden;
    border-radius: 16px;

    .el-dialog__header {
        padding: 0;
        margin: 0;
    }

    .el-dialog__body {
        height: 100%;
        padding: 0;
    }
}
</style>

<style lang="scss" scoped>
.custom-dialog-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--background);

    .header {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        height: 56px;
        padding: 0 20px;
        background: var(--front-background);
        border-bottom: 1px solid rgb(27 27 32 / 8%);

        .bar {
            width: 4px;
            height: 18px;
            margin-right: 10px;
            background: var(--el-color-primary, #1890ff);
        }

        .back-btn {
            width: 60px;
            height: 32px;
            font-size: 14px;
            line-height: 32px;
            color: #fff;
            text-align: center;
            cursor: pointer;
            background: var(--el-color-primary, #1890ff);
            border-radius: 4px;
        }
    }

    .body {
        position: relative;
        max-height: calc(90vh - 56px);
        overflow: hidden auto;

        .body-content {
            padding: 20px;
        }

        .fix-bottom {
            position: sticky;
            bottom: 0;
            left: 0;
            width: 100%;
            background: var(--background);
            border-top: 1px solid rgb(27 27 32 / 8%);
        }
    }
}
</style>
